<template>
    <el-dialog title="添加管理员" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-form size="small" :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
            <el-form-item label="登录账号" prop="account">
                <el-input v-model="ruleForm.account" placeholder="后台登录账号"></el-input>
            </el-form-item>
            <el-form-item label="管理员姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入管理员姓名"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="后台登录密码"></el-input>
            </el-form-item>
            <el-form-item label="登录角色" prop="role_id">
                <el-select v-model="ruleForm.role_id" placeholder="后台管理员角色">
                    <el-option v-for="item in options" :key="item.role_id" :label="item.role_name" :value="item.role_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status" active-value="1" inactive-value="2">
                </el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled" :loading="isLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { saveAdmin, getRoleData } from "@/api/staff.js";
export default {
    name: "addAdministrator",
    props: {},
    data() {
        return {
            visible: false,
            isDisabled: false,
            isLoading: false,
            ruleForm: {
                id: "",
                account: "",
                name: "",
                password: "",
                role_id: "",
                status: "1",
            },
            options: [],
            rules: {
                account: [
                    {
                        required: true,
                        message: "请输入登录账号",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入管理员姓名",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入管理员登录密码",
                        trigger: "blur",
                    },
                ],
                role_id: [
                    {
                        required: true,
                        message: "请输入管理员登录角色",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getRoleData();
    },
    methods: {
        add() {
            this.visible = true;
        },
        clear() {
            this.ruleForm = {
                id: "",
                account: "",
                name: "",
                password: "",
                role_id: "",
                status: "1",
            };
        },
        getRoleData() {
            getRoleData().then((res) => {
                if (res.code == 0) {
                    this.options = res.data;
                }
            });
        },
        onSubmit(formName) {
            console.log("this.ruleForm", this.ruleForm);
            this.isDisabled = true;
            this.isLoading = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    saveAdmin(this.ruleForm).then((res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.clear();
                            this.close();
                            this.$emit("reload");
                            this.isDisabled = false;
                            this.isLoading = false;
                        } else {
                            this.isDisabled = false;
                            this.isLoading = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        close() {
            this.visible = false;
        },
    },
};
</script>

<style>
</style>